const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
const { VueLoaderPlugin } = require("vue-loader");
const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
const WebpackBar = require("webpackbar");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.join(__dirname, "dist"),
    publicPath: "/",
    filename: "static/js/[name].[contenthash:8].js",
    chunkFilename: "static/js/[name].[contenthash:8].js",
  },
  resolve: {
    modules: ["node_modules"],
    extensions: [".vue", ".js", ".css", ".json"],
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      {
        test: /\.html$/,
        loader: "ejs-loader",
        options: {
          esModule: false,
        },
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: [/node_modules/],
      },
      {
        test: /\.css$/,
        use: ["vue-style-loader", "css-loader"],
      },
      {
        test: /\.less/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.png$/,
        type: "asset/resource",
        generator: {
          filename: "static/assets/imgs/[hash][ext][query]", // 单独指定 名字
        },
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "./public/index.html",
      title: "vue",
      favicon: "public/favicon.ico",
    }),

    new webpack.DefinePlugin({
      BASE_URL: JSON.stringify("/"),
    }),
    new CaseSensitivePathsPlugin(),
    // 忽略语言包
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new WebpackBar({
      color: "#40a9ff",
      reporters: ["profile", "fancy"],
      profile: true,
    }),
  ],
};
